<template>
	<view>
		<view class="ControlStrip"></view>
		<view class="navigationBar">
			<view class="get_back"><image src="../../static/logo.png" mode=""></image></view>
			<view>消息</view>
			<view class="navigationBar_r">
				<image src="../../static/logo.png" mode=""></image>
				<image src="../../static/logo.png" mode=""></image>
			</view>
		</view>
		<view class="navigationBar_tow">
			<view class="navigationBar_tow_main">
				<view>
					<image class="img1" src="../../static/logo.png" mode=""></image>
					<view>系统消息</view>
				</view>
				<view>
					<image class="img1" src="../../static/logo.png" mode=""></image>
					<view>互动信息</view>
				</view>
				<view>
					<image class="img2" src="../../static/logo.png" mode=""></image>
					<view>优惠活动</view>
				</view>
				
			</view>
		</view>
		<view class="message_main">
			<view class="message">
				<image src="../../static/logo.png" mode=""></image>
				<view class="message_r">
					<view style="display: flex;justify-content: space-between;">
						<text class="order_num">待前往订单：SGJY20191210-010</text>
						<text class="order_time">11/11 12:01</text>
					</view>
					<view class="order_status">您当前有一笔订单待前往，剩余29:03超时！</view>
				</view>
			</view>
			<view class="message">
				<image src="../../static/logo.png" mode=""></image>
				<view class="message_r">
					<view style="display: flex;justify-content: space-between;">
						<text class="order_num">待前往订单：SGJY20191210-010</text>
						<text class="order_time">11/11 12:01</text>
					</view>
					<view class="order_status">您当前有一笔订单待前往，剩余29:03超时！</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.message_r{
		width: calc(100% - 115rpx);
	}
	.order_status{
		color: rgba(172, 172, 172, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
		margin-top: 16rpx;
	}
	.order_time{
		color: rgba(172, 172, 172, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	.order_num{
		color: rgba(34, 27, 28, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	.message>image{
		width: 90rpx;
		height: 90rpx;
		margin-right: 25rpx;
	}
	.message{
		height: 120rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.message_main{
		width: calc(100% - 52rpx);
		padding: 0 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
	.img2{
		width: 30rpx;
		height: 40rpx;
	}
	.img1{
		width: 40rpx;
		height: 40rpx;
	}
	.navigationBar_tow_main>view>image{
		margin-bottom: 14rpx;
	}
	.navigationBar_tow_main>view{
		color: rgba(34, 27, 28, 1);
		font-size: 32rpx;
		text-align: center;
		font-family: PingFangSC-regular;
	}
	.navigationBar_tow_main{
		width: calc(100% - 52rpx);
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		position: absolute;
		top: calc(var(--status-bar-height) + 172rpx);
		left: 24rpx;
	}
	.navigationBar_tow{
		width: 100%;
		height: 150rpx;
		background-color: #DF3447;
		border-radius: 0 0 60rpx 60rpx;
	}
	.navigationBar_r :nth-child(2){
		width: 48rpx;
		height: 52rpx;
	}
	.navigationBar_r :nth-child(1){
		width: 64rpx;
		height: 52rpx;
		margin-right: 30rpx;
	}
	.navigationBar_r{
		height: 100%;
		position: absolute;
		top: 0;
		right: 32rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.get_back > image {
		width: 25rpx;
		height: 50rpx;
	}
	.get_back {
		width: 80rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
	}
	.navigationBar {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #DF3447;
		position: relative;
		text-align: center;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: PingFangSC-regular;
	}
	.ControlStrip {
		width: 100%;
		height: var(--status-bar-height);
		background-color: #DF3447;
	}
</style>
